<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="{{ url_for('static',filename='css/order.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/hhorder.png') }}">
    <link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">

    <title>办公室管理</title>

</head>


<body>

    <div id="app">

        <van-nav-bar fixed z-index="10000" title="办公室管理" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>

        <div class="default-height"></div>


        <van-row>
            <van-col span="24" class="section">
                <p v-cloak class="tip-label">添加会议室</p>
            </van-col>
        </van-row>


        <van-cell-group>
          <van-field v-model="office_name" label="会议室名称" placeholder="（eg:wuweizi）" rows="1" required ></van-field>
          <van-field v-model="office_desc" label="会议室描述" placeholder="（eg:五味子）" rows="1" required ></van-field>
        </van-cell-group>

        <div class="commit-outer">
            <van-button v-cloak class="commit" type="primary" size="small" @click="addOffice">添加</van-button>
        </div>


        <van-row>
            <van-col span="24" class="section">
                <p v-cloak class="tip-label">会议室管理</p>
            </van-col>
        </van-row>

        <van-swipe-cell :right-width="65" v-for="office in officeList" :key="office" :on-close="onClose">

            <div slot="right">
                <span v-cloak class="remove-order">删除</span>
            </div>

            <van-cell-group>
                <van-cell :title="office.desc"> </van-cell>
            </van-cell-group>

        </van-swipe-cell>


    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vant/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <script>

        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
        var officeList = {{ offices|tojson }};

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    office_name: "",
                    office_desc: "",
                    officeList: officeList
                };
            },
            methods: {
                onClickLeft() {
                    window.history.back();
                },
                addOffice() {
                    console.log('add office');
                    if (this.office_name == '') {
                        vant.Toast('请先输入会议室名称');
                        return
                    }

                    if (this.office_desc == '') {
                        vant.Toast('请先输入会议室描述');
                        return
                    }
                    axios.get($SCRIPT_ROOT + '/addOffice/', {
                            params: {
                                name: this.office_name,
                                desc: this.office_desc
                            }
                        }).then(function (response) {
                        if (response.data['status'] == 200) {
                            vant.Toast("添加成功")
                        } else {
                            vant.Toast(response.data['errorTip'])
                        }
                    })
                },
                onClose(clickPosition, instance) {
                      switch (clickPosition) {
                            case 'left':
                            case 'cell':
                            case 'outside':
                              instance.close();
                              break;
                            case 'right':
                              vant.Dialog.confirm({
                                message: '确定删除吗？'
                              }).then(() => {

                                  idx = (instance._uid - 13) / 3;
                                  app.onRemove(idx);

                                  // 删除
                                  instance.close();

                              }).catch(() => {

                              });
                              break;
                      }
                },
                onRemove(idx) {
                      axios.get($SCRIPT_ROOT + '/removeOffice/', {
                          params: {
                              id: app.officeList[idx]['id']
                            }
                      }).then(function (response) {
                          if (response.data['status'] == 200) {
                              window.location.href = $SCRIPT_ROOT + '/officeManage/';
                              vant.Toast("移除成功")
                          } else {
                              vant.Toast(response.data['errorTip'])
                          }
                      });
                }
            }
        });

    </script>


</body>
</html>